<template>
  <div class="dashboard-container">
    <img :src="bkg" width="100%" height="100%">
  </div>
</template>

<script>
import grainBuds from '../../img/grainBuds.jpg'
import grainInEar from '../../img/grainInEar.jpg'
import springBegins from '../../img/springBegins.jpg'
import summerBegins from '../../img/summerBegins.jpg'
import summerSolstice from '../../img/summerSolstice.jpg'
import theRains from '../../img/theRains.jpg'

export default {
  data() {
    return {
      bkg: grainBuds
    }
  },
  created: function() {
    var bkgs = [grainBuds, grainInEar, springBegins, summerBegins, summerSolstice, theRains]
    this.bkg = bkgs[Math.floor(Math.random() * bkgs.length)]
  }
}
</script>

<style>
    .dashboard-container {
        padding: 10px;
        line-height: 2;
    }
</style>

